<template>
    <div>
        <app-head></app-head>
        <app-body>

            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                <span>确认要买此保险吗?</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="buy" >确 定</el-button>
                </span>
            </el-dialog>


            <el-card class="box-card">
                <el-row>
                    <el-col :span="6"> <img src="../../assets/category/1.png" width="100%" alt="Image"></el-col>
                    <el-col :span="18">
                        <el-button style="float: right; " type="danger" size="medium" @click="buy(1)">¥999元/年 购买</el-button>
                        <span style="font-size: 30px; color:#606266;"><i class="el-icon-s-flag" style="color: red;"></i>
                            机动车辆损失险</span>
                        <br>
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>碰撞和倾覆‌：包括保险车辆与外界物体的直接接触导致的碰撞，以及由于自然灾害或意外事故导致车辆翻覆，使其失去正常状态和行驶能力‌
                        <br>
                        <i class="el-icon-success" style="color: green;"></i>火灾和爆炸‌：由火灾或爆炸造成的车辆损失‌
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>外界物体倒塌和空中运行物体坠落‌：包括外界物体倒塌或空中运行物体坠落导致的车辆损失，以及保险车辆在行驶中平行坠落造成的损失‌
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>自然灾害‌：包括雷击、暴风、龙卷风、暴雨、洪水、海啸、地陷、冰陷、崖崩、雪崩、雹灾、泥石流、滑坡等自然灾害造成的车辆损失‌
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>载运保险车辆的渡船遭受自然灾害‌：在有驾驶员随船照料的情况下，载运保险车辆的渡船遭受上述自然灾害造成的车辆损失‌
                        <br>
                        <br>
                    </el-col>
                </el-row>
            </el-card>
            <br>

            <el-card class="box-card">
                <el-row>
                    <el-col :span="6"> <img src="../../assets/category/2.png" width="100%" alt="Image"></el-col>
                    <el-col :span="18">
                        <el-button style="float: right; " type="danger" size="medium" @click="buy(2)">¥888元/年 购买</el-button>
                        <span style="font-size: 30px; color:#606266;"><i class="el-icon-s-flag" style="color: red;"></i>
                            车上人员责任险</span>
                        <br>
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>车上人员责任险的赔偿事项主要包括人身伤亡和财产损失。‌具体来说，车上人员责任险赔偿范围包括本车人员、被保险人以外的受害人的人身伤亡和财产损失。人身损失包括医疗费、护理费、交通费、营养费、住院伙食补助费等为治疗和康复支出的合理费用，以及因误工减少的收入等‌
                        <br>
                        <i class="el-icon-success" style="color: green;"></i>赔偿限额和保险金额
                        车上人员责任险的赔偿限额由被保险人和保险人在投保时协商确定，通常根据车辆的核定载客人数来设定，每个座位都有其对应的最高限额。例如，在一辆5座车内，司机的保额可以为20万，每位乘客则享有1万的保额，总计4万。若理赔金额超过限额，超出部分由个人承担‌
                        <br>

                        <br>
                        <br>
                    </el-col>
                </el-row>
            </el-card>
            <br>

            <el-card class="box-card">
                <el-row>
                    <el-col :span="6"> <img src="../../assets/category/3.png" width="100%" alt="Image"></el-col>
                    <el-col :span="18">
                        <el-button style="float: right; " type="danger" size="medium" @click="buy(3)">¥1500元/年 购买</el-button>
                        <span style="font-size: 30px; color:#606266;"><i class="el-icon-s-flag" style="color: red;"></i>
                            第三者责任险</span>
                        <br>
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>赔偿范围‌：第三者责任险赔偿范围包括因被保险机动车发生意外事故导致第三者的人身伤亡或财产损失。具体包括医疗费用（如医药费、诊疗费、住院费等）、误工费、交通费、护理费、住宿费等‌
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>赔偿标准‌：根据《中华人民共和国民法典》第一千一百七十九条的规定，赔偿范围应包括医疗费、护理费、交通费、营养费、住院伙食补助费等为治疗和康复支出的合理费用，以及因误工减少的收入。造成残疾的，还应赔偿辅助器具费和残疾赔偿金；造成死亡的，还应赔偿丧葬费和死亡赔偿金‌
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>赔偿流程‌：保险人根据事故责任比例计算赔偿，优先修复受损财产，并按照国家规定的赔偿标准进行。重复保险时，保险人按比例承担，且一次赔付后不再负责额外赔偿‌
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>免责范围‌：并非所有情况都属于保险责任范围。例如，被保险人或其家庭成员、本车人员的损失，以及由不可保风险如地震或战争导致的损害，保险人不负责赔偿。驾驶人醉酒、故意行为或违反驾驶规定的行为也会导致责任免除‌
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>保费计算‌：保费的计算基于多种因素，如投保人类型、车辆类型和责任限额。不同投保金额的选择范围广泛，从5万元到200万元不等。保额越高，保费略有增加，但赔偿时的差距却显而易见，保障程度也随之提升‌
                        <br>
                        <br>
                    </el-col>
                </el-row>
            </el-card>
            <br>

            <el-card class="box-card">
                <el-row>
                    <el-col :span="6"> <img src="../../assets/category/4.png" width="100%" alt="Image"></el-col>
                    <el-col :span="18">
                        <el-button style="float: right; " type="danger" size="medium" @click="buy(4)" >¥200元/年 购买</el-button>
                        <span style="font-size: 30px; color:#606266;"><i class="el-icon-s-flag" style="color: red;"></i>
                            车身划痕损失险</span>
                        <br>
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>赔偿范围‌：车身划痕损失险主要针对无明显碰撞痕迹的车身表面油漆单独划伤进行赔偿。具体来说，划痕险的保险责任是“他人恶意行为造成保险车辆车身人为划痕”，如果是被保险人及其家庭成员、驾驶人及其家庭成员的故意行为造成的损失则属于免责范围‌
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>赔偿限额和免赔率‌：大多数保险公司的划痕险赔付限额一般在2000元和5000元左右，免赔率在15%到20%之间。划痕险是累计赔付的，出险不限次数，但赔偿累计金额不能超过限额，超过限额后保险合同自动终止‌
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>及时报案‌：被保险车辆被刮花后，车主需及时向保险公司现场报案，报案时间一般应在48小时之内。如果超时，车主需携带身份证原件到保险公司补报案‌
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>定损修理‌：保险公司对车辆进行定损后，车主可以到指定的修理厂或4S店进行修理。修理费用由保险公司负责赔偿，但需扣除免赔率和限额‌
                        <br>
                        <i class="el-icon-success"
                            style="color: green;"></i>提供证明‌：如果车辆在道路上被划伤，需由交警开事故证明；若在非道路上被划伤，则需由派出所开事故证明‌
                        <br>
                        <br>
                    </el-col>
                </el-row>
            </el-card>
            <br>

            <el-card class="box-card">
                <el-row>
                    <el-col :span="6"> <img src="../../assets/category/5.png" width="100%" alt="Image"></el-col>
                    <el-col :span="18">
                        <el-button style="float: right; " type="danger" size="medium" @click="buy(5)">¥950元/年 购买</el-button>
                        <span style="font-size: 30px; color:#606266;"><i class="el-icon-s-flag" style="color: red;"></i>
                            交通强制险</span>
                        <br>
                        <br>
                        <i class="el-icon-success" style="color: green;"></i>死亡伤残赔偿限额为18万元人民币，包括以下费用：

                        ‌丧葬费‌：用于支付受害人的丧葬费用。
                        ‌死亡补偿费‌：对受害人的家庭进行经济补偿。
                        ‌残疾赔偿金‌：对因交通事故导致残疾的受害人进行赔偿。
                        ‌残疾辅助器具费‌：购买和安装假肢、轮椅等辅助器具的费用。
                        ‌护理费‌：受害人需要护理的费用。
                        ‌康复费‌：受害人康复治疗的费用。
                        ‌交通费‌：受害人及其家属处理事故和赔偿事宜的交通费用。
                        ‌被扶养人生活费‌：被扶养人的生活费用。
                        ‌住宿费‌：受害人及其家属的住宿费用。
                        ‌误工费‌：受害人及其家属因处理事故而误工的损失。
                        ‌精神损害抚慰金‌：对受害人及其家属的精神损害进行补偿‌
                        <br>
                        <i class="el-icon-success" style="color: green;"></i>医疗费用赔偿限额为1.8万元人民币，包括以下费用：

                        ‌医药费‌：治疗费用。
                        ‌诊疗费‌：诊断和治疗费用。
                        ‌住院费‌：住院期间的费用。
                        ‌住院伙食补助费‌：住院期间的伙食费用。
                        ‌必要的后续治疗费‌：后续治疗和康复的费用。
                        ‌整容费‌：因事故导致的整容费用。
                        ‌营养费‌：营养补充费用‌
                        <br>
                        <i class="el-icon-success" style="color: green;"></i>财产损失赔偿限额为2000元人民币，包括以下费用：

                        ‌车辆维修费‌：车辆维修或更换的费用。
                        ‌车上货物损失‌：车上货物损坏或丢失的损失‌
                        <br>

                        <br>
                    </el-col>
                </el-row>
            </el-card>
            <br>


        </app-body>
    </div>
</template>

<script>
import AppHead from '../common/AppHeader.vue';
import AppBody from '../common/AppPageBody.vue'
import AppFoot from '../common/AppFoot.vue'

export default {
    name: "bx",
    components: {
        AppHead,
        AppBody,
        AppFoot
    },
    data() {
        return {

            dialogVisible: false,

            images: [
                { id: 0, idView: require('../../assets/homeImages/1.png') },
                { id: 1, idView: require('../../assets/homeImages/2.png') }
            ],
            className: "",

            labelName: '0',
            idleList: [],
            currentPage: 1,
            totalItem: 1
        };
    },
    created() {
        this.findIdleTiem(1)
    },
    watch: {
        $route(to, from) {
            this.labelName = to.query.labelName;
            let val = parseInt(to.query.page) ? parseInt(to.query.page) : 1;
            // let totalPage=parseInt(this.totalItem/8)+1;
            // val=parseInt(val%totalPage);
            // val=val===0?totalPage:val;
            this.currentPage = parseInt(to.query.page) ? parseInt(to.query.page) : 1;
            this.findIdleTiem(val);
        }
    },
    mounted() {
        this.className = "lun-img-two";
        setTimeout(() => {
            this.className = "lun-img";
        }, 300);
    },

    methods: {

        buy(number){
            this.$api.addOrder({
                bxId: number
                }).then(res => {
                    console.log(res);
                    if (res.status_code === 1) {
                        this.$message.success("购买成功");
                    } else {
                        this.$message.error(res.msg);
                    }
                });
        },


        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

        changeImg: function (e) {
            this.className = "lun-img-two";
            setTimeout(() => {
                this.className = "lun-img";
            }, 300);
        },

        findIdleTiem(page) {
            const loading = this.$loading({
                lock: true,
                text: '加载数据中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0)'
            });
            if (this.labelName > 0) {
                this.$api.findIdleTiemByLable({
                    idleLabel: this.labelName,
                    page: page,
                    nums: 8
                }).then(res => {
                    console.log(res);
                    let list = res.data.list;
                    for (let i = 0; i < list.length; i++) {
                        list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
                        let pictureList = JSON.parse(list[i].pictureList);
                        list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
                    }
                    this.idleList = list;
                    this.totalItem = res.data.count;
                    console.log(this.totalItem);
                }).catch(e => {
                    console.log(e)
                }).finally(() => {
                    loading.close();
                })
            } else {
                this.$api.findIdleTiem({
                    page: page,
                    nums: 8
                }).then(res => {
                    console.log(res);
                    let list = res.data.list;
                    for (let i = 0; i < list.length; i++) {
                        list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
                        let pictureList = JSON.parse(list[i].pictureList);
                        list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
                    }
                    this.idleList = list;
                    this.totalItem = res.data.count;
                    console.log(this.totalItem);
                }).catch(e => {
                    console.log(e)
                }).finally(() => {
                    loading.close();
                })
            }
        },
        handleClick(tab, event) {
            // console.log(tab,event);
            console.log(this.labelName);
            this.$router.replace({ query: { page: 1, labelName: this.labelName } });
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.$router.replace({ query: { page: val, labelName: this.labelName } });
        },
        toDetails(idle) {
            this.$router.push({ path: '/details', query: { id: idle.id } });
        }
    }
}
</script>

<style scoped>
.idle-card {
    height: 300px;
    border: #eeeeee solid 1px;
    margin-bottom: 15px;
    cursor: pointer;
}

.fenye {
    display: flex;
    justify-content: center;
    height: 60px;
    align-items: center;
}

.idle-title {
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 10px;
}

.idle-prive {
    font-size: 16px;
    color: red;
}

.idle-place {
    font-size: 13px;
    color: #666666;
    float: right;
    padding-right: 20px;

}

.idle-time {
    color: #666666;
    font-size: 12px;
    margin: 0 10px;
}

.user-nickname {
    color: #999999;
    font-size: 12px;
    display: flex;
    align-items: center;
    height: 30px;
    padding-left: 10px;
}

.user-info {
    margin-top: 10px;
    float: right;
    padding: 5px 10px;
    height: 30px;
    display: flex;
}

.circle-div {
    width: 100px;

    height: 100px;
    /* 宽度和高度设为相同值以保持圆形 */
    background-color: #e75c09;
    /* 背景颜色 */
    border-radius: 50%;
    /* 将div变为圆形 */
    display: flex;
    align-items: center;
    /* 使内容垂直居中 */
    justify-content: center;
    /* 使内容水平居中 */
    color: white;
    /* 文字颜色 */
    font-size: 16px;
    /* 文字大小 */
}
</style>